
<div class="row fullPage">
  <div class="col-12">

    <mat-card class="h-100">
      <mat-card-content class="h-100">

        <!-- Top parts containing title of component and search textbox -->
        <div class="row align-items-center">

          <div class="col-xxl-8 col-xl-7 col-lg-6 col-12 mb-lg-0 mb-2">
            <h3 class="my-0 fw-bold">System log</h3>
          </div>

          <div class="col-xxl-4 col-xl-5 col-lg-6 col-12">

            <!-- Loading skeleton for search textbox -->
            <ng-container *ngIf="isLoading;else loaded">
              <app-loading-skeleton
                [amount]="1"
                colClass="col-12 mb-3"
                [blockHeight]="'41px'"
                [hasShadow]="false">
              </app-loading-skeleton>
            </ng-container>

            <!-- Search textbox -->
            <ng-template #loaded>
              <app-filter (filterList)="filterList($event)">
              </app-filter>
            </ng-template>

          </div>
        </div>

        <!-- Loading skeleton for datagrid -->
        <ng-container *ngIf="isLoading;else dataReady">
          <app-loading-skeleton
            [amount]="6"
            colClass="col-12 mb-3"
            [blockHeight]="'40px'"
            [hasShadow]="false">
          </app-loading-skeleton>
        </ng-container>

        <ng-template #dataReady>
          <div class="table-responsive mt-4">
            <table
              mat-table
              [dataSource]="dataSource"
              class="w-100 borderless hoverable">

              <!-- Content column -->
              <ng-container matColumnDef="content">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  class="px-sm-3">
                  Content
                </th>
                <td
                  mat-cell
                  *matCellDef="let element"
                  class="text-truncate px-sm-3">
                  {{element?.content}}
                </td>
              </ng-container>

              <!-- Created column -->
              <ng-container matColumnDef="date">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  class="text-nowrap px-sm-3 small-table-column">
                  Date &amp; time
                </th>
                <td
                  mat-cell
                  *matCellDef="let element"
                  class="text-nowrap px-sm-3 small-table-column">
                  {{element?.created | since}}
                </td>
              </ng-container>

              <!-- Id column -->
              <ng-container matColumnDef="id">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  class="pe-sm-3 small-table-column">
                  ID
                </th>
                <td
                  mat-cell
                  *matCellDef="let element"
                  class="pe-sm-3 small-table-column">
                  {{element.id}}
                </td>
              </ng-container>

              <!-- Type column -->
              <ng-container matColumnDef="type">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  class="px-sm-3 small-table-column">
                  Type
                </th>
                <td
                  mat-cell
                  *matCellDef="let element"
                  class="px-sm-3 small-table-column"
                  [class.text-danger]="element?.type === 'error'">
                  {{element?.type}}
                </td>
              </ng-container>

              <!-- Actions column -->
              <ng-container matColumnDef="action">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  class="ps-sm-3 small-table-column">
                  Actions
                </th>
                <td
                  mat-cell
                  *matCellDef="let element"
                  class="ps-sm-3 text-nowrap small-table-column"
                  [class.text-danger]="element?.type === 'error'">

                  <button
                    mat-button
                    color="primary"
                    (click)="showDetails(element)">
                    Details
                  </button>

                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

            </table>

          </div>

          <!-- Pager -->
          <mat-paginator
            [length]="count"
            [pageIndex]="pageOffset.length"
            [pageSize]="pageSize"
            (page)="page($event)">
          </mat-paginator>

        </ng-template>

      </mat-card-content>
    </mat-card>

  </div>
</div>